<template>
  <el-form
    ref="formRef"
    label-width="90px"
    :model="formData"
    label-position="top"
    :rules="state.formRules"
  >
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="表单名称:" prop="formName">
          <el-input
            v-model="formData.formName"
            :maxlength="32"
            show-word-limit
            type="text"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属分类:" prop="formTypeName">
          <el-cascader
            v-model="formData.formTypeId"
            clearable
            :collapse-tags="true"
            :options="instance.dataList"
            :placeholder="formData.formTypeName || '请选择所属分类'"
            :props="instance.props"
            :show-all-levels="false"
            style="width: 100%"
            @change="handleFormTypeChange"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="状态:" prop="formStatus">
          <DictSelect
            ref="statusRef"
            v-model:default-value="formData.formStatus"
            dict-code="1002"
            show-all="N"
            expanding
            @change="handleStatusChange"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="数据存储:" prop="storageType">
          <el-radio-group v-model="formData.storageType">
            <el-radio label="默认表" value="0" />
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="表单备注:" prop="formRemark">
          <el-input
            v-model="formData.formRemark"
            :maxlength="256"
            :rows="1"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup name="FormDefEdit" lang="ts">
import { filterTreeNode } from "@/utils/common";
import { querySystemTreeNode } from "@/api/admin/system/systemtree/";
import DictSelect from "@/components/dictSelect.vue";
import type { FormModel } from "./FormComponentMixin";
import { BasicCascaderProps, useCascader } from "@/hooks/cascader";

const formData = defineModel<FormModel>("formData");
const formRef = ref(null);

const state = reactive({
  formRules: {
    formName: [
      { required: true, message: "表单名称不能为空", trigger: "blur" }
    ],
    formTypeName: [
      { required: true, message: "请选择所属分类", trigger: "blur" }
    ],
    formStatus: [{ required: true, message: "请选择表单状态", trigger: "blur" }]
  }
});

const initFormType = async () => {
  if (formData.value.formTypeCode) {
    const item = filterTreeNode(
      cascaderOptions.dataList,
      formData.value.formTypeCode,
      "nodeCode"
    );
    if (item) {
      formData.value.formTypeId = item.id;
      formData.value.formTypeCode = item.nodeCode;
      formData.value.formTypeName = item.text;
    }
  }
};

const cascaderOptions = reactive<BasicCascaderProps>({
  autoLoad: false,
  queryForm: { treeCode: "form" },
  props: {
    checkStrictly: true,
    multiple: false,
    emitPath: false,
    label: "text",
    value: "id",
    leaf: "leaf",
    lazy: true
  },
  onLoaded: initFormType,
  queryFunction: querySystemTreeNode
});

const { instance: instance, queryCascaderData } = useCascader(cascaderOptions);

const handleStatusChange = val => {
  formData.value.formStatus = val;
};

const handleFormTypeChange = node => {
  const item = filterTreeNode(
    cascaderOptions.dataList,
    formData.value.formTypeId,
    "id"
  );
  if (item) {
    formData.value.formTypeId = item.id;
    formData.value.formTypeCode = item.nodeCode;
    formData.value.formTypeName = item.text;
  }
};

watchEffect(() => {
  if (formData.value && formData.value.formTypeCode) {
    initFormType();
  }
});

onMounted(() => {
  queryCascaderData();
});

const validate = () => {
  return new Promise<void>((resolve, reject) => {
    formRef.value
      .validate()
      .then(valid => {
        resolve(valid);
      })
      .catch(err => {
        reject(Object.keys(err).map(v => err[v][0].message));
      });
  });
};

defineExpose({
  validate
});
</script>

<style lang="scss" scoped>
.designer-base-scrollbar {
  overflow-x: hidden;
  min-height: calc(100vh - 160px);
  padding: 0px 10px;
}
.header-row {
  background-color: $main-bgc;
}
</style>
